<template>
    <view>
        <view class="info mt-20 pl-30 pr-30 pt-14 pb-14">
            <view class="info-top align-center pt-10 pb-10">
                <hj-image
                    src="icons-07.png"
                    :height="iconsSize"
                    :width="iconsSize"
                    mode="aspectFit"
                />
                <text class="ml-20 ft-32">
                    {{ orderDet?.roomTypeName || '' }} {{ orderDet?.roomCount || 1 }}间{{
                        orderDet?.nights || 1
                    }}晚
                </text>
            </view>
            <view class="info-in">
                可住{{ orderDet?.maxAdult || 2 }}人
                <text v-for="(item, index) in orderDet.bedTypeList" :key="index">
                    | {{ item.bedNum || 0 }}张{{ item.bedWidth || '1.2' }}米{{
                        item.bedType || '大床'
                    }}
                </text>
                | {{ orderDet.roomArea || '-' }}㎡ | {{ windowType }}
            </view>
            <view class="info-top align-center pt-10 pb-10">
                <hj-image
                    src="icons-26.png"
                    :height="iconsSize"
                    :width="iconsSize"
                    mode="aspectFit"
                />
                <text class="ml-20 ft-32">餐食信息</text>
            </view>
            <view class="info-in t-6">
                <!-- 最多展示个五个，超过直接展示到离店当天 并给出最后的提示 -->
                <view
                    class="info-in-item"
                    v-for="(item, index) in orderDet.orderDetailRespList"
                    :key="index"
                >
                    {{ dateFormat(item.stayDate) }}
                    <text class="t-3 ml-30">
                        {{
                            index === 0 || !orderDet.breakfastCount
                                ? '无早餐'
                                : `${orderDet.breakfastCount}份早餐/间`
                        }}
                    </text>
                </view>
                <view class="info-in-item">
                    {{ dateFormat(orderDet.checkOutDate) }}
                    <text class="t-3 ml-30">
                        {{
                            !orderDet.breakfastCount
                                ? '无早餐'
                                : `${orderDet.breakfastCount}份早餐/间`
                        }}
                    </text>
                </view>
            </view>
            <view class="info-top align-center pt-10 pb-10">
                <hj-image
                    src="roomList-02.png"
                    :height="iconsSize"
                    :width="iconsSize"
                    mode="aspectFit"
                />
                <text class="ml-20 ft-32">{{ orderDet?.contactName || '' }}</text>
            </view>
            <view class="info-top align-center pt-10 pb-10">
                <hj-image
                    src="edit-02.png"
                    :height="iconsSize"
                    :width="iconsSize"
                    mode="aspectFit"
                />
                <text class="ml-20 ft-32">{{ orderDet?.contactPhone || '' }}</text>
            </view>
        </view>
        <view class="order mt-20 pl-30 pr-30 pb-40">
            <view class="ft-32 bold pt-24 pb-10">订单信息</view>
            <view class="order-list space-between align-center" @click="handleAmount">
                <view>{{ orderDet.payStatus === 0 ? '订单金额' : '在线支付' }}</view>
                <view class="align-center">
                    <text class="c-m bold ft-24">￥</text>
                    <text class="c-m bold ft-36">{{ orderDet?.totalAmount }}</text>
                    <hj-image
                        src="right-01.png"
                        height="26rpx"
                        width="26rpx"
                        mode="aspectFit"
                        class="more"
                    />
                </view>
            </view>
            <view class="order-list space-between align-center">
                <view>创建时间</view>
                <view class="t-9">{{ orderDet?.createdTime || '' }}</view>
            </view>
            <view
                class="order-list space-between align-center"
                v-if="orderDet?.payStatus !== 0 && orderDet?.payTime"
            >
                <view>支付时间</view>
                <view class="t-9">{{ orderDet?.payTime || '' }}</view>
            </view>
            <view class="order-list space-between align-center" v-if="orderDet?.confirmTime">
                <view>酒店确认</view>
                <view class="t-9">{{ orderDet?.confirmTime || '' }}</view>
            </view>
            <view
                class="order-list space-between align-center"
                v-if="[6, 7].includes(orderDet?.orderStatus)"
            >
                <view>取消时间</view>
                <view class="t-9">{{ orderDet?.cancelTime || '' }}</view>
            </view>
            <view class="order-list space-between align-center" v-if="orderDet?.checkInTime">
                <view>入住时间</view>
                <view class="t-9">{{ orderDet?.checkInTime || '' }}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, computed } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'DetailInfo'
})
const props = defineProps({
    orderDet: {
        type: Object,
        default: () => {}
    }
})

const iconsSize = ref('36rpx')

const emit = defineEmits(['onAmount'])
// 窗户类型
const windowType = computed(() => {
    const windowType = props.orderDet?.windowType || 0
    switch (windowType) {
        case 1:
            return '部分有窗'
        case 2:
            return '无窗'
        default:
            return '有窗'
    }
})

// 查看消费明细
const handleAmount = () => {
    emit('onAmount')
}

const dateFormat = date => {
    if (!date) {
        return ''
    }
    try {
        return dayjs(date).format('MM月DD日')
    } catch (error) {
        return ''
    }
}
</script>

<style scoped lang="scss">
.info {
    background: $uni-bg-color;
    &-in {
        background: #f6f7fb;
        padding: 16rpx 20rpx 16rpx 56rpx;
        border-radius: 8rpx;
        margin-bottom: 20rpx;
        margin-top: 6rpx;
        &-item {
            margin-top: 8rpx;
        }
        &-item:first-child {
            margin-top: 0;
        }
    }
}
.order {
    background: $uni-bg-color;
    &-list {
        min-height: 64rpx;
        padding: 10rpx 0;
        .more {
            margin-right: -6rpx;
            margin-left: 10rpx;
        }
    }
}
</style>
